import React, { useState, useEffect } from 'react'
import { Button, SwipeCell, Cell, Badge } from 'react-vant'
import { ArrowDown } from '@react-vant/icons';
import axios from 'axios';

const index = () => {
    const [data, setData] = useState([])
    const Init = async () => {
        const res = await axios.get('http://192.168.0.154:3000/my/user')
        setData(res.data)
        console.log(res.data);
    }

    useEffect(() => {
        Init()
    }, [])
    // 删除
    const DeltetItem = async (id) => {
        const res = await axios.delete('http://192.168.0.154:3000/my/user/' + id)
        console.log(res);
        Init()
    }
    return (
        <div className='MessageGroup'>
            <div className='MessageGroupItem'
                onClick={() => {

                }}
            >
                <ArrowDown />
                <p>消息</p>
            </div>
            <div name='1'>
                {
                    data.map(item => {
                        return (
                            <SwipeCell
                                key={item.id}

                                rightAction={
                                    <Button style={{ height: '100%' }} square type="danger" onClick={() => {
                                        DeltetItem(item.id)
                                    }}>
                                        删除
                                    </Button>
                                }
                            >
                                <Cell>
                                    <div className='MessageItem' >
                                        <img src={item.crowdImage} alt="" style={{ width: '40px' }} />
                                        <div className='MessageItem-Right'>
                                            <p>{item.team}</p>
                                            <p className='message-text-overflow'>{item.crowdDesc}</p>
                                        </div>
                                        <div>
                                            <p>{item.crowdTime}</p>
                                            <Badge content={item.crowdStrip} style={{ marginLeft: '12px' }} />
                                        </div>
                                    </div>
                                </Cell>
                            </SwipeCell>
                        )
                    })
                }
            </div>

            {/* 列表 */}
        </div>
    )
}

export default index